<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<script src="../../../../scripts/jquery.js" type="text/javascript"></script>
	<link  href="../../../../themes/default/ui.css" type="text/css" rel="stylesheet" />
	
	<!-- 换肤 -->
	<script type="text/javascript" src="../../../theme_cookie.js"></script>
	
	<script src="../ui.inputpro.js" type="text/javascript"></script>
	<link  href="../ui.inputpro.css" rel="stylesheet" type="text/css" />
	
	<!-- 控件无关JS、CSS -->
	<link  href="../../../../themes/common/icon.css" type="text/css" rel="stylesheet" />
	<link type="text/css" href="../../../demos.css" rel="stylesheet" />
	
	<script type="text/javascript">
		$( function(){
			$(".inputMultiImg").input(
			[{
						type:'class',//样式背景渲染
						src:'icon-search',//class 来自与 icon.css
						title:'查询',
						event:{
							click:function(val){
								alert("查询"+val);
							}
						}
					},{
						type:'class',//样式背景渲染
						src:'icon-delete',//class 来自与 icon.css
						title:'清除',
						event:{
							click:function(val,input){
								input.val('') ;
								alert("清除"+val);
							}
						}
					}]
			);
			
			//单个图片
			jQuery(".inputSingleImg").input(
					{
						type:'class',//样式背景渲染
						src:'icon-search',//class 来自与 icon.css
						title:'查询',
						event:{
							click:function(val){
								alert("查询"+val);
							}
						}
					}
			) ;
			
			jQuery(".inputProImg").input({
				type:'img',//图片渲染
				src:'../../../../themes/common/images/icons/edit.png',
				event:{
					click:function(val){
						alert(val);
					}
				}
			}) ;
			
			jQuery(".inputProText").input({
				type:'text',//文字渲染
				src:'查询',
				event:{
					click:function(val){
						alert(val);
					}
				}
			}) ;

			$('#enable').click( function(){
				//设置控件为有效 inputImg('enable')
				jQuery(".inputimg").input().enable();
			} ) ;

			$('#disable').click( function(){
				//设置控件为无效 inputImg('disable')
				jQuery(".inputimg").input().disable();
			} ) ;

			$('#show').click( function(){
				//显示控件  inputImg('show')
				jQuery(".inputimg").input().show();
			} ) ;

			$('#hide').click( function(){
				//隐藏控件  inputImg('hide')
				jQuery(".inputimg").input().hide();
			} ) ;
		} ) ;
	</script>
</head>

<body>
	<div>
		<h2>图片或文字渲染的三种方式：</h2>
		
		<div class="demo-operate">
			<b>操作</b>
			<div  class='block'>
			<input type="radio" value='0' checked name="state" id="enable"/> 可用
			<input type="radio" value="1" name="state" id="disable"/>不可用
			</div>
			
			<div  class='block'>
			<input type="radio" value='0' checked name="visable" id="show"/> 显示
			<input type="radio" value="1" name="visable" id="hide"/>隐藏
			</div>
		</div>
		
		<div class='demo-block'>
			<div class='label'>背景图片</div> 
			<input type='text' class='inputMultiImg inputimg'/>（多个图片）<br/><br>
			<input type='text' class='inputSingleImg inputimg'/>（单个图片）
		</div>
		
		<div  class='demo-block'>
			<div class='label'>URL图片</div>  
			<input type='text' class='inputProImg inputimg'>
		</div>

		<div  class='demo-block'>
			<div class='label'>文本信息</div> 
			<input type='text' class='inputProText inputimg'>
		</div>
	</div>
	
	<div class="demo-source">
	</div>
</body>
</html>